<template>
  <div>
    <el-card class="el-card">
      <el-button type="primary" @click="addRole">新增</el-button>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        stripe
        class="el-table"
      >
        <el-table-column prop="name" label="角色名称" />
        <el-table-column prop="desc" label="角色描述" />
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-switch
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.status"
              @click="editStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-tooltip
              effect="dark"
              content="分配权限"
              placement="top"
              :enterable="false"
            >
              <el-button type="primary" :icon="Share" size="small"></el-button
            ></el-tooltip>
            <el-tooltip
              effect="dark"
              content="编辑"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                :icon="Edit"
                size="small"
                @click="editRole(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-button type="danger" :icon="Delete" size="small" @click="delRolesById(scope.row)"></el-button
            ></el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 新增角色弹框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="40%" @close="closeDialog">
      <el-form ref="formRef" :model="form" :rules="formRule">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item
          label="角色描述"
          :label-width="formLabelWidth"
          prop="desc"
        >
          <el-input
            type="textarea"
            v-model="form.desc"
            placeholder="请输入角色描述"
          />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addRoleOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Share, Edit, Delete } from "@element-plus/icons-vue";
import { getRoleListFn, addRolesFn, editRolesFn,delRolesFn,editStatusFn } from "@/api/role.js";
import { ref } from "vue";
import { ElMessage,ElMessageBox } from "element-plus";
// 分页页码
const page = ref(1);
const tableData = ref([]);
// 获取权限管理列表数据
const getRoleList = async () => {
  const res = await getRoleListFn(page.value);
  if (res.msg && res.msg !== "ok") return;
  tableData.value = res.data.list;
};
getRoleList();

// 表单实例
const formRef = ref(null);
// 新增弹框显示与隐藏
const dialogFormVisible = ref(false);
// 弹框标题
const title = ref("新增");
// 新增数据表单数据
const form = ref({
  name: "",
  desc: "",
  status: 0,
});
// label宽度
const formLabelWidth = "140px";
// 表单校验规则
const formRule = ref({
  name: [
    {
      required: true,
      message: "请输入角色名称",
      trigger: "blur",
    },
  ],
  desc: [
    {
      required: true,
      message: "请输入角色描述",
      trigger: "blur",
    },
  ],
});
// 新增角色
const addRole = () => {
  dialogFormVisible.value = true;
};
// 新增确定
const addRoleOk = () => {
  formRef.value.validate(async (isValid) => {
    if (!isValid) return;
    if (title.value == "新增") {
      // 校验表单
      const res = await addRolesFn(form.value);
      console.log(res, "res");
      if (res.msg && res.msg !== "ok") return;
      ElMessage.success("新增成功");
    } else {
      const res = await editRolesFn(roleId.value, form.value);
      if (res.msg && res.msg !== "ok") return;
      ElMessage.success("编辑成功");
    }
    dialogFormVisible.value = false;
    getRoleList();
  });
};
// 编辑角色
const roleId = ref("");
const editRole = (row) => {
  roleId.value = row.id;
  title.value = "编辑角色";
  form.value.name = row.name;
  form.value.desc = row.desc;
  form.value.status = row.status;
  dialogFormVisible.value = true;
};
// 删除角色
const delRolesById =async (row) => {
    const isDel = await ElMessageBox.confirm(
    '是删除',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  if(isDel == 'confirm') {
    const res = await delRolesFn(row.id)
    if(res.msg && res.msg !=='ok') return
    ElMessage.success('删除成功')
    getRoleList();
  }
}
// 修改启用状态
const editStatus = async (row) => {
    const res = await editStatusFn(row.id,row.status)
    if (res.msg && res.msg !== "ok") {
    if (row.status == 0) {
      row.status = 1;
    } else if (row.status == 1) {
      row.status = 0;
    }
    ElMessage.error(res.msg);
    return;
  }
  ElMessage.success("状态修改成功");
}
// 关闭弹框
const closeDialog = () => {
    formRef.value.resetFields();
}
</script>

<style lang="less" scoped>
.el-table,
.el-card {
  margin-top: 20px;
}
</style>
